<template>
    <div class="parent-container">
        <table style="width: 350px; height: 200px">
            <thead>
                <tr class="tr">
                    <th>序号</th>
                    <th>设置名称</th>
                    <th>设置状态</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="(item, index) in settings" :key="item.id">
                    <td>{{ index + 1 }}</td>
                    <td>{{ item.name }}</td>
                    <td>
                        <img :src="item.enabled ? '/Icon_On.png' : '/Icon_Off.png'" :alt="item.enabled ? '开启' : '关闭'"
                            class="toggle-image" @click="toggleSetting(item.id)">
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</template>

<script>
import { reactive } from 'vue';

export default {
    setup() {
        const settings = reactive([
            { id: 1, name: '触控反馈', enabled: true },
            { id: 2, name: '高能预警', enabled: false },
            { id: 3, name: '传送门跟踪', enabled: true },
            { id: 4, name: '天眼', enabled: false },
            { id: 5, name: '红外线通讯', enabled: true }
        ]);

        function toggleSetting(id) {
            const setting = settings.find(item => item.id === id);
            setting.enabled = !setting.enabled;
        }

        return { settings, toggleSetting };
    }
}
</script>

<style scoped>
.parent-container {
    width: 350px;
    height: 200px;
    /* padding: 10px; */
    font-size: 12px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

.tr {
    color: #A2B6FF;
    height: 40px;
    background: linear-gradient(229.52deg, rgba(14, 95, 255, 1) 0%, rgba(14, 95, 255, 0.43) 100%);
}

th,
td {
    /* padding: 5px; */
    text-align: center;
}

.toggle-image {
    width: 20px;
    /* 控制图像大小 */
    height: 20px;
    /* 控制图像大小 */
    cursor: pointer;
}
</style>